import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
import CSSModules from 'react-css-modules';

import styles from './Tabs.scss';

@immutableRenderDecorator
@CSSModules(styles, {allowMultiple: true})
export default class TabPane extends Component {

  static propTypes = {
    prefixClass: PropTypes.string,
    tab: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.string,
    ]),
	  isActive: PropTypes.bool,
  }
  constructor(prop) {
    super(prop);
  }

  render() {
    const {
	    prefixClass,
	    isActive,
      children,
    } = this.props;
    const classes = classnames({
	    [`${prefixClass}-panel`]: true,
	    [`${prefixClass}-active`]: isActive,
    })
    return (
      <div
        role="tab-panel"
        styleName={classes}
        aira-hidden={`${!isActive}`}
      >
        {children}
      </div>
    )
  }

}
